<template>
  <div>
      <div style="display: flex; justify-content: center; align-items: center;">
          <el-form :inline="true" :model="formInline" label-width="100px">
            <el-form-item label="销售单号：">
              <el-input v-model="formInline.Number" placeholder="请输入" style="width: 150px;"></el-input>
            </el-form-item>
            <el-form-item label="单据状态">
              <el-select v-model="formInline.Status" placeholder="请选择" style="width: 150px;">
                <el-option label="未审核" value="未审核"></el-option>
                <el-option label="未出库" value="未出库"></el-option>
                <el-option label="部分出库" value="部分出库"></el-option>
                <el-option label="已出库" value="已出库"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="客户名称">
              <el-select v-model="formInline.Kehu" placeholder="请选择" style="width: 150px;">
                <el-option
         v-for="item in Khname"
        :key="item.s_CuNumber"
        :label="item.s_CuName"
        :value="item.s_CuNumber">
      </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="销售日期">
              <el-date-picker v-model="formInline.date" type="date" placeholder="选择日期" style="width: 120px;"></el-date-picker>
              至
              <el-date-picker v-model="formInline.date1" type="date" placeholder="选择日期" style="width: 120px;"></el-date-picker>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="searchData">查询</el-button>
            </el-form-item>
            <el-form-item>
              <el-button  @click="chongzhi">重置</el-button>
            </el-form-item>
          </el-form>
        </div >
        

        <div style="display: flex;">
          <div style="width: 90px;">
            <el-button type="primary" @click="handleAdd">新增</el-button>
          </div>
          <div style="width: 90px;">
            <el-button type="primary" @click="handleShen">审核</el-button>
          </div>
          <div style="width: 90px;">
            <el-button type="primary" @click="handleDel">删除</el-button>
          </div>
        </div>
        <div style="overflow-x: auto;">
          <el-table :data="data" style="width: 100%" class="dataTable" @selection-change="handleSelectionChangeDel">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="s_OIndex" label="序号"></el-table-column>
            <el-table-column prop="s_OSalesOrder" label="销售单号"></el-table-column>
            <el-table-column prop="s_ODocumentStatus" label="单据状态">
              <template slot-scope="scope">
                <span :style="{ color: getStatusColor(scope.row.s_ODocumentStatus) }">
                  {{ scope.row.s_ODocumentStatus }}
                </span>
              </template>
            </el-table-column>
            <el-table-column label="销售日期">
              <template slot-scope='scope'>
                <span>{{ filterTime(scope.row.s_OSalesDate) }}</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="s_OCustomerName" label="客户名称"></el-table-column> -->
            <el-table-column prop="s_OContactPerson" label="联系人"></el-table-column>
            <el-table-column prop="s_OContactInformation" label="联系方式"></el-table-column>
            <el-table-column prop="s_OSalesDepartment" label="销售部门"></el-table-column>
            <el-table-column prop="s_OSalesRepresentative" label="销售负责人"></el-table-column>
            <el-table-column prop="s_OQuantitySold" label="销售数量"></el-table-column>
            <el-table-column prop="s_OSalesAmount" label="销售金额"></el-table-column>
            <el-table-column prop="s_OSoldItems" label="销售货品"></el-table-column>
            <el-table-column label="制单时间">
              <template slot-scope='scope'>
                <span>{{ filterTime(scope.row.s_OCreationTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="s_OApprover" label="审核人"></el-table-column>
            <el-table-column label="审核时间">
              <template slot-scope='scope'>
                <span>{{ filterTime(scope.row.s_OApproverTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template slot-scope="scope">
                <!-- <el-button @click="XsUpd(scope.row)" type="text">编辑</el-button> -->
                <el-button 
                @click="XsUpd(scope.row)" 
                type="text"
                :disabled="scope.row.s_ODocumentStatus === '已出库'||scope.row.s_ODocumentStatus==='部分出库'" 
              >
                编辑
              </el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
        
            <el-pagination v-on:size-change="handleSizeChange"
            v-on:current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="rows">
</el-pagination>

<el-dialog
title="销售订单新增"
:visible.sync="xsddxz"
:size="'auto'"
>
<h3>基础信息</h3>
<el-form ref="AddForm" :model="AddForm" :rules="rules" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="销售单号">
      <el-input v-model="AddForm.xindex" placeholder="自动获取系统编号" style="width: 200px;" disabled readonly/>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="销售日期" prop="xdate">
      <el-date-picker style="width: 200px;"
        v-model="AddForm.xdate"
        type="date"
        format="yyyy-MM-dd"
        placeholder="请选择日期">
      </el-date-picker>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="客户名称" prop="xkname">
      <el-select v-model="AddForm.xkname" placeholder="请选择客户" style="width: 200px;" @change="getSupplierInfo">
        <el-option                                                
        v-for="item in tableData"
        :key="item.s_CuNumber"
        :label="item.s_CuName"
        :value="item.s_CuNumber">
      </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="联系人" prop="xren">
      <el-input v-model="AddForm.xren" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="联系方式" prop="xphone">
      <el-input v-model="AddForm.xphone" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="销售部门" prop="xspum">
      <el-cascader v-model="AddForm.xspum"
      :options="options"
      :props="{ checkStrictly:true }"
      v-on:change="handleCascaderChange">
    
    </el-cascader>
    </el-form-item>
    
  </el-col>
  <el-col :span="12">
    <el-form-item label="销售人" prop="xname">
      <el-select v-model="AddForm.xname" placeholder="请选择" style="width: 200px;" >
        <el-option
        v-for="item in tableData"
        :key="item.s_CuNumber"
        :label="item.s_CuManager"
        :value="item.s_CuNumber">
      </el-option>
      </el-select>
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="备注">
      <el-input v-model="AddForm.xbez" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
<h3>销售货品明细</h3>
<div style="width: 70px;">
  <!-- 添加按钮 -->
  <el-button type="primary" @click="MxAdd" style="font-size: 10px;">添加</el-button>
</div>


<div style="overflow-x: auto;">
  <el-table :data="xsmxdata" style="width: 100%" class="dataTable">
    <el-table-column prop="s_DSerialNumber" label="序号"  ></el-table-column>
    <el-table-column prop="s_DProductName" label="货品名称"></el-table-column>
    <el-table-column prop="s_DProductNumber" label="货品编号"></el-table-column>
    <el-table-column prop="s_DSpecifications" label="规格型号"></el-table-column>
    <el-table-column prop="s_DUnit" label="单位"></el-table-column>
    <el-table-column prop="s_DProductType" label="货品类型"></el-table-column>
    <el-table-column prop="s_DCurrentInventory" label="当前库存"></el-table-column>
    <el-table-column label="销售数量">
      <template slot-scope="scope">
        <el-input v-model="scope.row.s_DQuantitySold" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column  label="销售单价">
      <template slot-scope="scope">
        <el-input v-model="scope.row.s_DUnitPrice" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column  label="销售金额">
      <template slot-scope="scope">
        {{ (scope.row.s_DQuantitySold || 0) * (scope.row.s_DUnitPrice || 0) }}
      </template>
    </el-table-column>
    <el-table-column  label="备注">
      <template slot-scope="scope">
        <el-input v-model="scope.row.s_DRemarks" placeholder="请输入"></el-input>
      </template>
    </el-table-column>
    <el-table-column label="操作">
      <template slot-scope="scope">
        <el-button @click="showDispose(scope.row)" type="text">移除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div>
  合计&nbsp;&nbsp;&nbsp;货品总数量：{{ totalQuantity }}&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;总金额：{{ totalAmount }}
  </div>
</div>
<h3>上传附件</h3>
<div>  
  <el-upload
  class="upload-demo"
  :action="getUploadUrl()"
  :on-preview="handlePreview"
  :on-remove="handleRemove"
  :before-upload="beforeUpload"
  multiple
  :file-list="fileList">
  <el-button size="small" type="primary">点击上传</el-button>
  <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过200MB</div>
</el-upload>
</div>  
<span slot="footer" class="dialog-footer">
  <el-button @click="xsddxz = false">取消</el-button>
  <el-button @click="saveData">保存</el-button>
  
</span>
</el-dialog>


<el-dialog
title="添加货品"
:visible.sync="tjhp"
:size="'auto'"
>
<div style="overflow-x: auto;">
<el-table ref="tableName" :data="rkdata" style="width: 100%" class="dataTable" @selection-change="handleSelectionChange">
  <el-table-column type="selection" width="55"></el-table-column>
  <el-table-column prop="i_IIndex" label="序号"></el-table-column>
  <el-table-column prop="i_IProductName" label="货品名称"></el-table-column>
  <el-table-column prop="i_IProductCode" label="货品编号"></el-table-column>
  <el-table-column prop="i_IModel" label="规格型号"></el-table-column>
  <el-table-column prop="i_IUnit" label="单位"></el-table-column>
  <el-table-column prop="i_IUnitPrice" label="入库单价"></el-table-column>
  <el-table-column prop="i_IQuantity" label="当前库存"></el-table-column>
</el-table>
<span slot="footer" class="dialog-footer">
  <el-button @click="tjhp = false">取消</el-button>
  <el-button @click="hpForm">确认</el-button>
</span>  
</div>
</el-dialog>

<el-dialog
title="审核"
:visible.sync="shenhe"
:size="'auto'"
>

<el-form ref="ShenForm" :model="ShenForm" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="编号" v-if="!isHidden">
      <el-input v-model="ShenForm.bh1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="审核结果">
      <el-radio-group v-model="ShenForm.jieguo">
        <el-radio label="通过">通过</el-radio>
        <el-radio label="驳回">驳回</el-radio>
      </el-radio-group>
    </el-form-item>
  </el-col>
 
  <el-col :span="24">
    <el-form-item label="审核意见">
      <el-input v-model="ShenForm.yijian" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="shenhe= false">取消</el-button>
    <el-button @click="ShenData">确认</el-button>
    
  </span>
</el-dialog>

<el-dialog
title="销售修改"
:visible.sync="xgxz"
:size="'auto'"
>
<h3>基础信息</h3>
<el-form ref="UpdForm" :model="UpdForm" label-width="100px" >
<el-row>
  <el-col :span="12">
    <el-form-item label="编号">
      <el-input v-model="UpdForm.jindex1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="进货日期">
      <el-date-picker style="width: 200px;"
        v-model="UpdForm.jdate1"
        type="date"
        format="yyyy-MM-dd"
        placeholder="请选择日期">
      </el-date-picker>
    </el-form-item>
  </el-col>
 
  <el-col :span="12">
    <el-form-item label="联系人">
      <el-input v-model="UpdForm.Sren1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="12">
    <el-form-item label="联系方式">
      <el-input v-model="UpdForm.Sphone1" placeholder="请输入" style="width: 200px;" />
    </el-form-item>
  </el-col>
  <el-col :span="24">
    <el-form-item label="备注">
      <el-input v-model="UpdForm.Sjbez1" placeholder="请输入"/>
    </el-form-item>
  </el-col>
</el-row>
</el-form>
  <span slot="footer" class="dialog-footer">
    <el-button @click="xgxz = false">取消</el-button>
    <el-button @click="xgsaveData">保存</el-button>
    
  </span>
</el-dialog>
  </div>
</template>

<script>
import $http from '../router/base.js';
import { MessageBox } from 'element-ui';
export default {
  data() {
      return {
        tableData: [
        { s_ODocumentStatus: '已出库' },
        { s_ODocumentStatus: '未出库' },
        { s_ODocumentStatus: '未审核' },
        { s_ODocumentStatus: '部分出库' }
      ],
        xgxz:false,//修改的模态框
        UpdForm:{
        jindex1:'',
        jdate1:'',
        Sphone1:'',
        Sren1:'',
        Sjbez1:''
      },
        isHidden: true, // 控制文本框显示与隐藏的变量
        shenhe:false,//审核的模态框
        // 选中的序号数组
        selectedIds: [],
        selectedPOIndex:'',
        ShenForm:{
        bh1:'',
        jieguo:'',
        yijian:''
      },
        options: [],//级联
        tableData:[],//客户名称下拉框
        xsmxdata:[],//销售明细的数据
          rkdata:[],//入库的货品
          tjhp:false,//销售明细添加货品
          xsddxz:false,//销售订单新增
          data: [], 
      currentPage: 1,
      pageSize: 10,
      rows: 0, // 数据总条数
          Khname:[],//查询客户名称
          formInline: {
          Number: '',
          Status: '',
          Kehu:'',
          date:'',
          date1:'',
      },
      fileList:[],//文件上传显示
      AddForm:{
        xindex:'',
        xdate:'',
        xkname:'',
        xren:'',
        xphone:'',
        xspum:'',
        xname:'',
        xbez:''
      },
      rules: {
        xphone: [
    { required: true, message: '请输入联系方式', trigger: 'blur' },
    { pattern: /^[0-9]{11}$/, message: '联系方式必须为11位数字', trigger: 'blur' }
  ],
  xdate: [
    { required: true, message: '请输入日期', trigger: 'blur' },
  ],
  xkname: [
    { required: true, message: '请选择客户', trigger: 'blur' },
  ],
  xren: [
    { required: true, message: '请输入联系人', trigger: 'blur' },
  ],
  xspum: [
    { required: true, message: '请选择部门', trigger: 'blur' },
  ],
  xname: [
    { required: true, message: '请选择销售人', trigger: 'blur' },
  ],

},
      orderNumber:'',
      }
  },
  methods:{
    getStatusColor(status) {
      const statusColorMap = {
        '已出库': 'green',
        '未出库': 'orange',
        '未审核': 'red',
        '部分出库':'blue'
      };
      return statusColorMap[status];
    },
    generateCode() {
      // 生成随机大写字母
      const randomLetter = String.fromCharCode(65 + Math.floor(Math.random() * 26));

      // 生成当前日期
      const currentDate = new Date().toISOString().slice(0, 10).replace(/-/g, '');

      // 生成4个随机数字
      const randomDigits = Math.floor(1000 + Math.random() * 9000);

      // 组合成编号
      return randomLetter + currentDate + randomDigits;
    },
     //销售订单的修改
     XsUpd(row){
      this.xgxz=true;
      this.UpdForm.jindex1=row.s_OIndex;
      this.UpdForm.jdate1=row.s_OSalesDate;
      this.UpdForm.Sphone1=row.s_OContactInformation;
      this.UpdForm.Sren1=row.s_OContactPerson;
      this.UpdForm.Sjbez1=row.s_Reamr
    },//修改保存
    xgsaveData(){
      $http.put("api/Salesorder/XsUpd", {
        s_OIndex: this.UpdForm.jindex1,
        s_OSalesDate: this.UpdForm.jdate1,
        s_OContactPerson: this.UpdForm.Sren1,
        s_OContactInformation:this.UpdForm.Sphone1,
        s_Reamr:this.UpdForm.Sjbez1
}).then(res => {
  if (res) {
    this.$message({
      message: '修改成功！',
      type: 'success'
    });

    this.xgxz = false;
    this.searchData(); // 重新填充销售机会列表
  }
})
.catch(err => {
  this.$message({
    message: '修改失败！',
    type: 'error'
  });
});
    },
    //批量删除
  handleDel() {
    const hasUnstoredData = this.selectedRows.some(row => row.s_ODocumentStatus === '未出库' || row.s_ODocumentStatus === '部分出库' || row.s_ODocumentStatus === '已出库');
  if (!hasUnstoredData) {
    MessageBox.confirm('存在未入库的数据，确定删除所选单据？', '警告', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 执行删除操作的逻辑
      $http.delete('api/Salesorder/XsDel', {
        data: this.selectedIds
      })
      .then(response => {
        this.$message({
          message: '删除成功！',
          type: 'success'
        });
        this.Qu();
        this.searchData();
      })
      .catch(error => {
        this.$message({
          message: '删除失败！',
          type: 'error'
        });
      });
    }).catch(() => {
      // 用户点击取消按钮时执行的操作，这里不需要执行任何操作
    });
  } else {
    this.$message.warning('无法删除已审核的数据');
  }
  },
      //销售审核
      ShenData(){
      $http.put(`api/Salesorder/XsShen?to=${this.ShenForm.jieguo}`, {
        s_OIndex: this.ShenForm.bh1,
        p_Reviewcomments: this.ShenForm.yijian,
       
}).then(res => {
  if (res) {
    this.$message({
      message: '审核成功！',
      type: 'success'
    });

    this.shenhe = false;
    this.searchData(); // 重新填充销售机会列表
  }
})
.catch(err => {
  this.$message({
    message: '审核失败！',
    type: 'error'
  });
});

    },
    // 处理复选框选中事件
    handleSelectionChangeDel(selection) {
this.selectedIds = selection.map(item => item.s_OIndex);
if (selection && selection.length > 0) {
      const selectedRow = selection[0]; // 获取选中的第一行数据
      this.selectedPOIndex = selectedRow.s_OIndex; // 获取选中行的编号
    } else {
      this.selectedPOIndex = ''; // 如果没有选中行，则清空选中行的编号
    }
    this.selectedRows = selection;//无法删除已审核的数据
     console.log(this.selectedIds);
     console.log( this.selectedPOIndex);
},
    //审核点击弹框
    handleShen(){
        this.shenhe=true;
        this.ShenForm.bh1=this.selectedPOIndex;
       
    },
    saveForm() {//销售订单表的添加
const gys=this.AddForm.xkname.toString();
const jhr=this.AddForm.xname.toString();
// 生成编号
this.orderNumber = this.generateCode();
$http.post("api/Salesorder/Add", {
  s_OSalesOrder: this.orderNumber,
  s_ODocumentStatus: '未审核',
  s_OSalesDate: this.AddForm.xdate,
  s_OCustomerName: gys,
  s_OContactPerson: this.AddForm.xren,
  s_OContactInformation: this.AddForm.xphone,
  s_OSalesDepartment:this.AddForm.xspum,
  s_OSalesRepresentative: jhr,
  s_OQuantitySold: this.totalQuantity,
  s_OSalesAmount: this.totalAmount,
  s_OSoldItems: this.concatenatedProductNames,
  s_OCreator: 'admin',
  s_ODepartment: '采购部',
  s_OCreationTime: new Date(), // 使用正确的日期变量
  s_OApprover: null, 
  s_OApproverTime: null, 
  p_Reviewcomments: null,
  s_Reamr:this.AddForm.xbez
})
.then(res => {
  if (res) { // 注意这里应该判断 res.data 而不是 res
    this.$message({
      message: '添加成功！',
      type: 'success'
    });
    this.searchData();
      this.Qu();
  } else {
    this.$message({
      message: '添加失败！',
      type: 'error' // 应该是 error 类型
    });
  }
})
.catch(error => {
  console.error('请求失败:', error);
  this.$message.error('请求失败，请稍后重试！');
});
},
    //销售明细表的添加
    savea() { 
const promises = this.xsmxdata.map(row => {
  const postData = {
    s_DProductName: row.s_DProductName,
    s_DProductNumber: row.s_DProductNumber,
    s_DSpecifications: row.s_DSpecifications,
    s_DUnit: row.s_DUnit,
    s_DProductType: row.s_DProductType,
    s_DCurrentInventory: row.s_DCurrentInventory,
    s_DQuantitySold: row.s_DQuantitySold,
    s_DUnitPrice: row.s_DUnitPrice,
    s_DSalesAmount: (row.s_DQuantitySold || 0) * (row.s_DUnitPrice || 0),
    s_DRemarks: row.s_DRemarks,
    s_DSaCode: this.orderNumber
  };

  return $http.post("api/Salesorderdetail/Add", postData)
    .then(res => {
      return res;
    })
    .catch(error => {
      console.error('添加失败:', error);
      throw new Error('添加失败');
    });
});

Promise.all(promises)
  .then(results => {
    const isSuccess = results.every(res => res);
    if (isSuccess) {
      this.$message({
        message: '添加成功！',
        type: 'success'
      });
    } else {
      this.$message({
        message: '添加失败！',
        type: 'error'
      });
    }
  })
  .catch(() => {
    this.$message.error('添加失败，请稍后重试！');
  });
},
    saveData(){//销售订单和明细的添加的保存
      this.$refs.AddForm.validate((valid) => {
    if (valid) {
      this.saveForm();
      this.savea();
      this.xsddxz=false;
     
    } else {
      // 表单验证失败，可以在这里进行相应的提示或处理
    }
  });
    },
    handleCascaderChange(value) {
      // 获取选中的 value 和 label
  const selectedValue = value[value.length - 1];
  const selectedLabel = this.getLabelByValue(selectedValue);
  this.AddForm.xspum = selectedValue.toString();
  // 打印选中的 value 和 label
  console.log('选中的 label 的值:', selectedLabel);
  console.log('选中的 value 的值:', selectedValue);
},
getLabelByValue(value) {
  // 在 options 中查找对应 value 的 label
  const findLabel = (options, value) => {
    for (const item of options) {
      if (item.value === value) {
        return item.label;
      }
      if (item.children) {
        const label = findLabel(item.children, value);
        if (label) {
          return label;
        }
      }
    }
    return null;
  };
  
  return findLabel(this.options, value);
  },
//一级下拉
Yiji() {
      $http.get("api/OrganizationalStructure/GetYI")
        .then((response) => {
          this.options = response.map(item => {
            return {
              value: item.value,
              label: item.label,
              children: item.children
            };
          });
        })
        .catch((error) => {
          console.log(error);
        });
},//组织机构级联
    //根据客户名称查询联系人和联系方式
    getSupplierInfo() {
      $http.get('api/Customermanagement/QuName', {
    params: {
      Name:this.AddForm.xkname
    }
  }).then((response) => {
    this.AddForm.xren = response.s_CuContactPerson;
        this.AddForm.xphone = response.s_CuContactNumber;

  }).catch((error) => {
    console.log(error);
  });
  },
    //客户名称下拉框
    Khhu(){
      $http.get('api/Customermanagement/Qu',{              
          }).then((response)=>{
             this.tableData=response;
            
          }).catch((error)=>{
             console.log(error);
            
          })
    },
    handleSelectionChange(selection) {
    this.selectedRows = selection;
  },
     //销售明细添加货品确认
     hpForm() {
      const selectedRows = this.$refs.tableName.selection; // 获取所有选中的行数据
    // 检查是否至少选择了一行
    if (selectedRows.length > 0) {
      // 遍历选中的每一行数据
      selectedRows.forEach(row => {
        // 将选中行数据添加到显示数据数组中
        this.xsmxdata.push({
          s_DSerialNumber: this.xsmxdata.length + 1, // 序号为当前数组长度加1
          s_DProductName: row.i_IProductName,
          s_DProductNumber: row.i_IProductCode,
          s_DSpecifications: row.i_IModel,
          s_DUnit: row.i_IUnit,
          s_DProductType: row.i_IProductType,
          s_DCurrentInventory: row.i_IQuantity,
          s_DQuantitySold:null,
          s_DUnitPrice:row.i_IUnitPrice,
          s_DSalesAmount:null,
          s_DRemarks:null,
        });
      });
      
      // 关闭弹窗
      this.tjhp = false;
    } else {
      // 提示用户至少选择一行数据
      this.$message.warning('请至少选择一行数据！');
    }
  },
    //入库明细查询
    HoupQu(){
      $http.get('api/Inventorydetails/Qu',{              
          }).then((response)=>{
             this.rkdata=response;
          }).catch((error)=>{
             console.log(error);
          })
    },
   //销售明细添加
   MxAdd(){
      this.tjhp=true;
         this.HoupQu();
    },
       //销售订单新增
    handleAdd(){
      this.xsddxz=true;   
      this.Khhu();
      this.Yiji();
    },
       //查询客户名称
       Kehuname(){
          $http.get('api/Customermanagement/Qu',{              
          }).then((response)=>{
             this.Khname=response;
          }).catch((error)=>{
             console.log(error);
            
          }) 
       },
       filterTime(date) {
if (date) {
  return date.split('T')[0];
} else {
  return '';
}
},
//重置
chongzhi(){
      this.formInline.Number='';
      this.formInline.Status='';
      this.formInline.Kehu='';
      this.formInline.date='';
      this.formInline.date1='';
    },
    searchData() {//分页模糊查询
        // 查询数据逻辑
  const { Number, Status, Kehu, date,date1 } = this.formInline;
  $http.get('api/Salesorder/Fye', {
    params: {
      pageSize: this.pageSize,
      currentPage: this.currentPage,
      Number: Number,
      Status: Status,
      Cuname: Kehu,
      date: date,
      date1:date1
    }
  }).then((response) => {
    this.data = response;
   
    this.handleTotalRecords();
  }).catch((error) => {
    console.log(error);
  });
      // 查询逻辑
    },
    //查询总行数
    Qu(){
      $http.get('api/Salesorder/Qu', {
  }).then((response) => {
    this.rows = response.length;
  
  }).catch((error) => {
    console.log(error);
  });
     },
     beforeUpload(file) {
    const isImage = file.type.includes('image');
    if (!isImage) {
      this.$message.error('只能上传图片文件');
    }
    const isLt200M = file.size / 1024 / 1024 < 200;
    if (!isLt200M) {
      this.$message.error('上传文件大小不能超过200MB');
    }
    return isImage && isLt200M;
  },
   // 获取动态的上传URL
   getUploadUrl() {
    // 构建上传URL，并将this.AddForm.jindex的值添加到URL中
    return `http://localhost:5084/api/PublicAttachment/Upload?num=${this.generateCode()}`;
  },
  handlePreview(file) {
const reader = new FileReader();
reader.onload = (e) => {
  const imageUrl = e.target.result;
  // 在这里可以使用 imageUrl 来显示预览图片
  // 例如，将 imageUrl 设置为 img 标签的 src 属性
  // 或者在模态框中显示预览图片
  console.log('预览图片:', imageUrl);
};
reader.readAsDataURL(file.raw);
},
handleRemove(file) {
const index = this.fileList.indexOf(file);
if (index !== -1) {
  this.fileList.splice(index, 1);
  // 在这里可以向服务器发送请求，删除对应的文件
  console.log('删除文件:', file.name);
}
},
        // 处理页码变化
    handleSizeChange: function (size) {
  this.pageSize = size;
  this.searchData();
  },
    handleCurrentChange: function (page) {
  this.currentPage = page;
  this.searchData();
},

  },
  mounted: function () {
   this.searchData();
   this.Qu();
  this.Kehuname();
},
computed: {
  totalQuantity() {
    // 计算入库数量的总和
    return this.xsmxdata.reduce((total, item) => total + (parseFloat(item.s_DQuantitySold) || 0), 0);
   
  },
  concatenatedProductNames() {
    return this.xsmxdata
      .map(item => `${item.s_DProductName}`) // 将每个货品名称转换为所需格式
      .join('，'); // 使用逗号拼接所有转换后的货品名称
  },
  totalAmount() {
    // 计算金额的总和
    return this.xsmxdata.reduce((total, item) => total + ((item.s_DQuantitySold || 0) * (item.s_DUnitPrice || 0)), 0);
  },
},
}
</script>

<style scoped>
/* 使用深度选择器来覆盖Element UI的默认样式 */  
::v-deep .dataTable .el-table__header-wrapper th {  
  background-color: #F5F5F5; /* 设置标题单元格的背景颜色为蓝色 */  
  color: black; /* 如果需要的话，设置标题单元格的文字颜色为白色 */  
}  
</style>